<!--
/* @license
 * Copyright 2018 Google Inc. All Rights Reserved.
 * Licensed under the Apache License, Version 2.0 (the 'License');
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an 'AS IS' BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
-->
<!DOCTYPE html>
<html lang="en">
<head>
  <title>&lt;model-viewer&gt; Multiple Elements</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link type="text/css" href="../styles/examples.css" rel="stylesheet" />
  <link rel="shortcut icon" type="image/png" href="../assets/favicon.png"/>



  <style>
    .demo {
      height: 100vh;
    }
    .grid {
        width: 100%;
        height: 100%;
        display: grid;
        grid-gap: 10px;
        grid-template-rows: 1fr 2fr 3fr 4fr;
        grid-template-columns: 1fr 2fr 3fr 4fr;
    }
    .grid model-viewer {
        width: 100%;
        height: 100%;
    }
  </style>
</head>
<body>
  <div class="demo">
    <div class="grid">
        <model-viewer src="../shared-assets/models/Astronaut.glb"
                      alt="A 3D model of an astronaut (1 of 16)"
                      auto-rotate background-color="#40C4FF"></model-viewer>
        <model-viewer src="../shared-assets/models/Astronaut.glb"
                      alt="A 3D model of an astronaut (2 of 16)"
                      auto-rotate background-color="#455A64"></model-viewer>
        <model-viewer src="../shared-assets/models/Astronaut.glb"
                      alt="A 3D model of an astronaut (3 of 16)"
                      auto-rotate background-color="#EEFF41"></model-viewer>
        <model-viewer src="../shared-assets/models/Astronaut.glb"
                      alt="A 3D model of an astronaut (4 of 16)"
                      auto-rotate background-color="#ff5252"></model-viewer>
        <model-viewer src="../shared-assets/models/Astronaut.glb"
                      alt="A 3D model of an astronaut (5 of 16)"
                      auto-rotate background-color="#651FFF"></model-viewer>
        <model-viewer src="../shared-assets/models/Astronaut.glb"
                      alt="A 3D model of an astronaut (6 of 16)"
                      auto-rotate background-color="#1DE9B6"></model-viewer>
        <model-viewer src="../shared-assets/models/Astronaut.glb"
                      alt="A 3D model of an astronaut (7 of 16)"
                      auto-rotate background-color="#FF4081"></model-viewer>
        <model-viewer src="../shared-assets/models/Astronaut.glb"
                      alt="A 3D model of an astronaut (8 of 16)"
                      auto-rotate background-color="#424242"></model-viewer>
        <model-viewer src="../shared-assets/models/Astronaut.glb"
                      alt="A 3D model of an astronaut (9 of 16)"
                      auto-rotate background-color="#40C4FF"></model-viewer>
        <model-viewer src="../shared-assets/models/Astronaut.glb"
                      alt="A 3D model of an astronaut (10 of 16)"
                      auto-rotate background-color="#455A64"></model-viewer>
        <model-viewer src="../shared-assets/models/Astronaut.glb"
                      alt="A 3D model of an astronaut (11 of 16)"
                      auto-rotate background-color="#EEFF41"></model-viewer>
        <model-viewer src="../shared-assets/models/Astronaut.glb"
                      alt="A 3D model of an astronaut (12 of 16)"
                      auto-rotate background-color="#ff5252"></model-viewer>
        <model-viewer src="../shared-assets/models/Astronaut.glb"
                      alt="A 3D model of an astronaut (13 of 16)"
                      auto-rotate background-color="#651FFF"></model-viewer>
        <model-viewer src="../shared-assets/models/Astronaut.glb"
                      alt="A 3D model of an astronaut (14 of 16)"
                      auto-rotate background-color="#1DE9B6"></model-viewer>
        <model-viewer src="../shared-assets/models/Astronaut.glb"
                      alt="A 3D model of an astronaut (15 of 16)"
                      auto-rotate background-color="#FF4081"></model-viewer>
        <model-viewer src="../shared-assets/models/Astronaut.glb"
                      alt="A 3D model of an astronaut (16 of 16)"
                      auto-rotate background-color="#424242"></model-viewer>
    </div>
  </div>

  <!-- Documentation-specific dependencies: -->
  <script type="module"
      src="./built/dependencies.js">
  </script>

  <!-- Loads <model-viewer> on modern browsers: -->
  <script type="module"
      src="../../../node_modules/@google/model-viewer/dist/model-viewer.js">
  </script>
</body>
</html>
